<template>
   <!--bread-->
      <div class="bread">
        <ul class="fl sui-breadcrumb">
          <li>
            <a href="#">全部结果</a>
          </li>
        </ul>
        <ul class="fl sui-tag">
          <li class="with-x">手机</li>
          <li class="with-x" v-for='breadItem in getsearchlist.trademarkList' :key='breadItem.tmId'>{{breadItem.tmName}}<i @click="delateHandle" :data-id='breadItem.tmId'>×</i></li>
         
        </ul>
      </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
name:'Bread',
// data(){
//   return {
//     id:'',
//     }
// },
computed:{
  ...mapState('search',['getsearchlist']),
},
methods:{
  delateHandle(e){
    console.log(e.target.dataset.id);
    console.log(this.getsearchlist.trademarkList);
   this.getsearchlist.trademarkList = this.getsearchlist.trademarkList.filter((item)=>{return item.tmId!=e.target.dataset.id})
  //  注意这里一定不全等于，因为那个id一个是数字3,一个是字符串3,所以只比较数字就可以了。
  },
},
}
</script>

<style lang='less' scoped>
 .bread {
      margin-bottom: 5px;
      overflow: hidden;
      .sui-breadcrumb {
        padding: 3px 15px;
        margin: 0;
        font-weight: 400;
        border-radius: 3px;
        float: left;
        li {
          display: inline-block;
          line-height: 18px;
          a {
            color: #666;
            text-decoration: none;
            &:hover {
              color: #4cb9fc;
            }
          }
        }
      }
      .sui-tag {
        margin-top: -5px;
        list-style: none;
        font-size: 0;
        line-height: 0;
        padding: 5px 0 0;
        margin-bottom: 18px;
        float: left;
        .with-x {
          font-size: 12px;
          margin: 0 5px 5px 0;
          display: inline-block;
          overflow: hidden;
          color: #000;
          background: #f7f7f7;
          padding: 0 7px;
          height: 20px;
          line-height: 20px;
          border: 1px solid #dedede;
          white-space: nowrap;
          transition: color 400ms;
          cursor: pointer;
          i {
            margin-left: 10px;
            cursor: pointer;
            font: 400 14px tahoma;
            display: inline-block;
            height: 100%;
            vertical-align: middle;
          }
          &:hover {
            color: #28a3ef;
          }
        }
      }
    }
</style>